<template>
  <header class="header">
    <h1 @click="showTools">记事本</h1>
  </header>
</template>

<script>
export default {
  name: 'Header',
  methods: {
    showTools() {
      this.$emit('tools')
    }
  }
}
</script>

<style lang="scss" scoped>
// $bg_color: #00D1B2;

.header {
  position: relative;
  z-index: 100;
  // background-color: $bg_color;
  
  
  h1 {
    margin: 0 auto;
    color: #fff;
    padding: .5em 1em;
    width: 100%;
    max-width: 800px;
    position: relative;
    text-align: center;
    pointer-events:none; //父元素不触发点击事件
    // 汉堡包菜单
    &::after {
      position: absolute;
      top: .15em;
      right: .2em;
      display: block;
      content: '\2261';
      font-size: 1.5em;
      pointer-events:auto; //该属性可触发点击事件
    }
  }
  
}


</style>